<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增菜单' : '编辑菜单'" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio v-for="item in menuTypeDicts" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="getName(menuTypeDicts,form.type) + '名称'" prop="name">
        <el-input v-model="form.name" :placeholder="getName(menuTypeDicts,form.type) + '名称'"/>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId">
        <treeselect v-model="form.parentId" :options="menuLists" placeholder="选择上级菜单" />
      </el-form-item>
      <el-form-item v-if="form.type == 2" label="授权标识" prop="perms">
        <el-input v-model="form.perms" placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"/>
      </el-form-item>
      <el-form-item v-if="form.type == 1" label="菜单url" prop="url">
        <el-row>
          <el-col :span="22">
            <el-input v-model="form.url" placeholder="菜单路由"/>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <el-tooltip placement="top" effect="light" style="padding: 10px;">
              <div slot="content">
                <p>URL格式：</p>
                <p>1.常规业务开发的功能URL，如用户管理，Views目录下页面路径为 system/app/AppList.vue, 此处填写 system/app/AppList。</p>
                <p>2.嵌套外部网页，如通过菜单打开百度网页，此处填写 http://www.baidu.com，http:// 不可省略。</p>
                <p>示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com 嵌套网页：http://127.0.0.1:8000</p>
              </div>
              <i class="el-icon-warning"/>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="form.type != 2" label="排序编号" prop="orderNum">
        <el-input-number v-model="form.orderNum" :min="0" controls-position="right" label="排序编号"/>
      </el-form-item>
      <el-form-item v-if="form.type != 2" label="菜单图标" prop="icon">
        <el-popover
          placement="bottom-start"
          width="360"
          trigger="click"
          @show="$refs['iconSelect'].reset()">
          <IconSelect ref="iconSelect" @selected="selected"/>
          <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
            <svg-icon
              v-if="form.icon"
              slot="prefix"
              :icon-class="form.icon"
              class="el-input__icon"
              style="height: 32px;width: 16px;"/>
            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
          </el-input>
        </el-popover>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { save, update,getMenuByAppId } from '@/api/menu'
import initDict from '@/mixins/initDict'
import Config from '@/config'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
export default {
  components: { Treeselect,IconSelect },
  mixins: [initDict],
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },

  },
  data() {
    return {
      loading: false,
      dialog: false,
      menuLists: [],
      form: {
        appId: '',
        type: '1',
        orderNum: '1',
        icon: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    getMenuType(){
      this.getEnumList()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.parentId !== undefined) {
            this.loading = true
            if (this.isAdd) {
              this.doAdd()
            } else this.doEdit()
          } else {
            this.$message({
              message: '上级菜单不能为空',
              type: 'warning'
            })
          }
        }
      })
    },
    doAdd() {
      save(this.form).then(res => {
        if (res.code == Config.code_200) {
          this.resetForm()
          this.$notify({ title: '添加成功', type: 'success' })
          this.$parent.initAllData()
        } else {
          this.$notify.error({ title: '失败', message: res.msg })
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      update(this.form).then(res => {
        if (res.code == Config.code_200) {
          this.resetForm()
          this.$notify({ title: '修改成功', type: 'success' })
          this.$parent.initAllData()
        } else {
          this.$notify.error({ title: '失败', message: res.msg })
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    },
    setMenus(data) {
      //设置菜单数据
      var jsonObj = JSON.parse(JSON.stringify(data));
      this.menuLists=[];
      for (var i = 0; i < jsonObj.length; i++) {
        var menu = [];
        menu['id'] = jsonObj[i].id;
        menu['label'] = jsonObj[i].name;
        menu['isDefaultExpanded'] = true;
        if (jsonObj[i].children !== undefined && jsonObj[i].children.length > 0) {
          var jsonO = JSON.parse(JSON.stringify(jsonObj[i].children));
          menu['children'] = this.parseChildrenMenus(jsonO)
        }
        this.menuLists.push(menu)
      }
    },
    parseChildrenMenus(jsonObj){
      //解析子菜单数据
      var menu=[];
      for (var i = 0; i < jsonObj.length; i++) {
        var childrenMenu=[];
        childrenMenu['id']=jsonObj[i].id;
        childrenMenu['label']=jsonObj[i].name;
        childrenMenu['isDefaultExpanded']=true;
        if (jsonObj[i].children !==undefined && jsonObj[i].children.length > 0){
          var jsonObjChild = JSON.parse(JSON.stringify(jsonObj[i].children));
          childrenMenu['children']=this.parseChildrenMenus(jsonObjChild)
        }
        menu.push(childrenMenu)
      }
      return menu
    },
    selected(name) {
      this.form.icon = name
    },
  }
}
</script>

<style scoped>

</style>
